<template>
  <div>
    <el-card>
      <template #header>
        <h4>商品列表</h4>
      </template>
      <div>
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column type="expand">
            <template v-slot="{ row }">
              <el-form label-position="left" inline class="demo-table-expand">
                -->
                <el-form-item label="商品ID">
                  <span>{{ row.id }}</span>
                </el-form-item>
                <el-form-item label="商品名称">
                  <span>{{ row.name }}</span>
                </el-form-item>
                <el-form-item label="所属分类">
                  <span>{{ row.category }}</span>
                </el-form-item>
                <el-form-item label="商品价格">
                  <span>{{ row.price }}</span>
                </el-form-item>
                <el-form-item label="商品图片">
                  <span>{{ row.imgUrl }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ row.ctime | formatDate }}</span>
                </el-form-item>
                <el-form-item label="商品评价">
                  <span>{{ row.rating }}</span>
                </el-form-item>
                <el-form-item label="商品销量">
                  <span>{{ row.sellCount }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ row.goodsDesc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="name" width="200px">
          </el-table-column>
          <el-table-column label="所属分类" prop="category"> </el-table-column>
          <el-table-column label="商品价格" prop="price"> </el-table-column>
          <el-table-column label="商品图片" width="100px">
            <template v-slot="{ row }">
              <img :src="url + row.imgUrl" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="商品描述" prop="goodsDesc" width="200px">
          </el-table-column>
          <el-table-column
            label="操作"
            style="display: flex;"
            width="150"
            fixed="right"
          >
            <template v-slot="{ row }">
              <el-button
                size="mini"
                type="primary"
                @click="$router.push('/pro/edit/' + row.id)"
              >
                <!-- $router.push({ path: '/pro/edit', query: { row: row } }) -->
                编辑</el-button
              >
              <el-button size="mini" type="danger" @click="comdel(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { comList, comdel } from '../../api/info.js'
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      url: 'http://127.0.0.1:5000/upload/imgs/goods_img/'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const data = await comList({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      console.log(data)
      this.tableData = data.data
      this.total = data.total
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
      console.log(`当前页: ${val}`)
    },

    // 删除
    comdel(id) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const data = await comdel({ id: id })
          console.log(data)
          if (data.code === 0) {
            this.getList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
// /deep/.el-card__body{

// }

img {
  width: 100%;
  height: 100%;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-pagination {
  margin-top: 20px;
}
</style>
